<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8"/>
	<meta name="author"/>
	<style>
		.example{
			width: 150px;
			height: 80px;
			margin: 10px;
		}
		.example1{
			background: -moz-linear-gradient( top,#ccc,#000);
			background: -webkit-linear-gradient(top,#ccc,#000);
		}
		.example2{
			background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/
			background:-webkit-linear-gradient(left,#ace,#f96);/*new gradient for Webkit*/
			background:-o-linear-gradient(left,#ace,#f96); /*Opera11*/
		}
		.example3{
			background: -moz-linear-gradient(left, #ace, #f96, #ace, #f96, #ace);
			background: -webkit-linear-gradient(left, #ace, #f96, #ace, #f96, #ace);
			background: -o-linear-gradient(left, #ace, #f96, #ace, #f96, #ace);
		}
		.example4{
			background: -moz-linear-gradient(left 30deg, #ace, #f96, #ace, #f96, #ace);
			background: -webkit-linear-gradient( 30deg, #ace, #f96, #ace, #f96, #ace);
			background: -o-linear-gradient(left 30deg, #ace, #f96, #ace, #f96, #ace);
		}
		.deg0 {
			background: -moz-linear-gradient(0deg, #ace, #f96);
			background: -webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));
			background: -webkit-linear-gradient(0deg, #ace, #f96);
			background: -o-linear-gradient(0deg, #ace, #f96);
		}

		.deg45 {
			background: -moz-linear-gradient(45deg, #ace, #f96);
			background: -webkit-gradient(linear,0 100%,100% 0%,from(#ace),to(#f96));
			background: -webkit-linear-gradient(45deg, #ace, #f96);
			background: -o-linear-gradient(45deg, #ace, #f96);
		}
		.deg90 {
			background: -moz-linear-gradient(90deg, #ace, #f96);
			background: -webkit-gradient(linear,50% 100%,50% 0%,from(#ace),to(#f96));
			background: -webkit-linear-gradient(90deg, #ace, #f96);
			background: -o-linear-gradient(90deg, #ace, #f96);
		}
		.deg135 {
			background: -moz-linear-gradient(135deg, #ace, #f96);
			background: -webkit-gradient(linear,100% 100%,0 0,from(#ace),to(#f96));
			background: -webkit-linear-gradient(135deg, #ace, #f96);
			background: -o-linear-gradient(135deg, #ace, #f96);
		}
		.deg180 {
			background: -moz-linear-gradient(180deg, #ace, #f96);
			background: -webkit-gradient(linear,100% 50%,0 50%,from(#ace),to(#f96));
			background: -webkit-linear-gradient(180deg, #ace, #f96);
			background: -o-linear-gradient(180deg, #ace, #f96);
		}
		.deg225 {
			background: -moz-linear-gradient(225deg, #ace, #f96);
			background: -webkit-gradient(linear,100% 0%,0 100%,from(#ace),to(#f96));
			background: -webkit-linear-gradient(225deg, #ace, #f96);
			background: -o-linear-gradient(225deg, #ace, #f96);
		}
		.deg270 {
			background: -moz-linear-gradient(270deg, #ace, #f96);
			background: -webkit-gradient(linear,50% 0%,50% 100%,from(#ace),to(#f96));
			background: -webkit-linear-gradient(270deg, #ace, #f96);
			background: -o-linear-gradient(270deg, #ace, #f96);
		}
		.deg315 {
			background: -moz-linear-gradient(315deg, #ace, #f96);
			background: -webkit-gradient(linear,0% 0%,100% 100%,from(#ace),to(#f96));
			background: -webkit-linear-gradient(315deg, #ace, #f96);
			background: -o-linear-gradient(315deg, #ace, #f96);
		}
		.deg360 {
			background: -moz-linear-gradient(360deg, #ace, #f96);
			background: -webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));
			background: -webkit-linear-gradient(360deg, #ace, #f96);
			background: -o-linear-gradient(360deg, #ace, #f96);
		}
	</style>
</head>
<body>
<div class="example example1"></div>
<div class="example example2"></div>
<div class="example example3"></div>
<div class="example example4"></div>
<div class="example deg0"></div>
<div class="example deg45"></div>
<div class="example deg90"></div>
<div class="example deg135"></div>
<div class="example deg180"></div>
<div class="example deg225"></div>
<div class="example deg270"></div>
<div class="example deg315"></div>
<div class="example deg360"></div>
</body>
</html>
